<template>
	<div class="reg">
		<TopBar titles="注册"></TopBar>
		
		<!-- 注册框 -->
		<div class="reg-wrapper">
			<van-cell-group class="input-group">
			  <van-field v-model="user.phone" clearable label="手机号" placeholder="请输入手机号" maxlength="11"/>
			  <van-field v-model="user.pwd" label="密码" type="password" placeholder="请输入密码" maxlength="16"/>
			  <van-field v-model="user.rePwd" label="确认密码" type="password" placeholder="请输入密码" maxlength="16"/>
			</van-cell-group>
			<van-button type="primary" round block @click="registe">注册</van-button>
		</div>
		
		<BottomBar></BottomBar>
	</div>
</template>

<script>
	// 引用的组件
	import allComponent from '../util/allComponent.js'
	
	export default {
		name:'Registe',
		data:function(){
			return {
				user:{
					phone:'',
					pwd:'',
					rePwd:''
				}
			}
		},
		components:{
			TopBar : allComponent.TopBar,
			BottomBar : allComponent.BottomBar,
		},
		methods:{
			registe(){
				let user = this.user;
				// 验证
				if(user.phone.trim() === '' || user.pwd.trim() === '' || user.rePwd.trim() === ''){
					this.$toast({
						message:'输入不能为空',
						type:'fail'
					})
					return;
				}else if(!/0?(13|14|15|18|17|19)[0-9]{9}/.test(user.phone)){
					this.$toast({
						message:'手机号码格式不正确',
						type:'fail'
					})
					return;
				}else if(user.pwd !== user.rePwd){
					this.$toast({
						message:'两次密码不一致',
						type:'fail'
					})
					return;
				}else{
					let date = new Date();
					let user = {};
					user.id = this.$store.state.users[this.$store.state.users.length-1].id+1;
					user.nic = date.toLocaleDateString();
					user.phone = this.user.phone;
					user.pwd = this.user.pwd;
					user.sex = '';
					user.name = '';
					this.$store.commit({
						type:'add',
						obj:user,
						formName:'users'
					})
					
					this.$toast({
						message:'注册成功',
						type:'success'
					})
					
					this.$router.push('/login')
					
					return;
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.input-group {
		margin-bottom: 1.25rem;
	}
</style>
